import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:riverpod_demo/page/home/view/home_page.dart';
import 'package:riverpod_demo/page/mine/view/mine_page.dart';
import 'package:riverpod_demo/page/tabber/provider/taber_provider.dart';

class TaberPage extends StatefulWidget {
  const TaberPage({super.key});

  @override
  State<TaberPage> createState() => _TaberPageState();
}

class _TaberPageState extends State<TaberPage> {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (BuildContext context, WidgetRef ref, Widget? child) {
        return _buildPage(context, ref.watch<int>(taberProviderProvider));
      },
    );
  }

  Widget _buildPage(BuildContext context, int selectIndex) {
    List<Widget> tabPageList = [
      const HomePage(),
      const MinePage(),
      const HomePage(),
      const Center(
        child: const Text('啦啦啦啦啦啦'),
      ),
      const MinePage()
    ];

    /// 底部tab
    Widget buildBottomTab() {
      return Consumer(
        builder: (BuildContext context, WidgetRef ref, Widget? child) {
          return BottomNavigationBar(
            unselectedItemColor: const Color(0xFF666666),
            selectedItemColor: const Color(0xFF000000),
            selectedFontSize: 11.sp,
            unselectedFontSize: 9.sp,
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                icon: Padding(
                  padding: EdgeInsets.only(top: 12.h, bottom: 6.h),
                  child: Image(
                    fit: BoxFit.fill,
                    width: 20.w,
                    height: 20.w,
                    image: AssetImage(selectIndex == 0
                        ? "assets/images/tabbar_home_select.png"
                        : "assets/images/tabbar_home_unselect.png"),
                    color: selectIndex == 0 ? Colors.blueAccent : Colors.black38,
                  ),
                ),
                label: '首页',
              ),
              BottomNavigationBarItem(
                  icon: Padding(
                    padding: EdgeInsets.only(top: 12.h, bottom: 6.h),
                    child: Image(
                      width: 20.w,
                      height: 20.w,
                      image: AssetImage(selectIndex == 1
                          ? "assets/images/tabbar_novel_select.png"
                          : "assets/images/tabbar_novel_unselect.png"),
                      color: selectIndex == 1 ? Colors.blueAccent : Colors.black38,
                    ),
                  ),
                  label: '小说'),
              BottomNavigationBarItem(
                  icon: Padding(
                    padding: EdgeInsets.only(top: 12.h, bottom: 6.h),
                    child: Image(
                      width: 20.w,
                      height: 20.w,
                      image: const AssetImage("assets/images/tabbar_center.png"),
                      color: selectIndex == 1 ? Colors.red : Colors.grey,
                    ),
                  ),
                  label: ''),
              BottomNavigationBarItem(
                  icon: Stack(
                    children: [
                      Container(
                        padding: EdgeInsets.only(
                          top: 12.h,
                          bottom: 6.h,
                        ),
                        child: Image(
                          width: 20.w,
                          height: 20.w,
                          image: AssetImage(selectIndex == 3
                              ? "assets/images/tabbar_book_select.png"
                              : "assets/images/tabbar_book_unselect.png"),
                          color: selectIndex == 3 ? Colors.blueAccent : Colors.black38,
                        ),
                      ),
                    ],
                  ),
                  label: '书架'),
              BottomNavigationBarItem(
                icon: Padding(
                  padding: EdgeInsets.only(top: 12.h, bottom: 6.h),
                  child: Image(
                    fit: BoxFit.fill,
                    width: 20.w,
                    height: 20.w,
                    image: AssetImage(selectIndex == 4
                        ? "assets/images/tabbar_mine_select.png"
                        : "assets/images/tabbar_mine_unselect.png"),
                    color: selectIndex == 4 ? Colors.blueAccent : Colors.black38,
                  ),
                ),
                label: '我的',
              ),
            ],
            currentIndex: selectIndex,
            onTap: (int index) async {
              if (selectIndex == index) {
                return;
              }
              ref.read(taberProviderProvider.notifier).changeIndex(index);
            },
          );
        },
      );
    }

    Widget initFloatingActionButton() {
      return Consumer(builder: (BuildContext context, WidgetRef ref, Widget? child) {
        return Container(
          margin: EdgeInsets.only(top: 56.h),
          width: 46.w,
          height: 46.h,
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.blueAccent, width: 3.w),
              borderRadius: BorderRadius.circular(46.h)),
          child: FloatingActionButton(
            backgroundColor: Colors.white,
            elevation: 10,
            onPressed: () {
              ref.read(taberProviderProvider.notifier).changeIndex(2);
            },
            child: Image(
              fit: BoxFit.cover,
              width: 46.w,
              height: 46.w,
              image: const AssetImage("assets/images/tabbar_center.png"),
            ),
          ),
        );
      });
    }

    return Scaffold(
      backgroundColor: Colors.white,
      body: IndexedStack(
        index: selectIndex,
        children: tabPageList,
      ),
      floatingActionButton: initFloatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: buildBottomTab(),
    );
  }
}
